<template>
  <div class="login">
    <div class="content">
      <h2>用户登录</h2>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="loginForm"
        label-width="80px"
        size="small"
      >
        <el-form-item label="用户名：" prop="account">
          <el-input v-model="ruleForm.account">
            <i slot="prefix" class="iconfont icon-yonghufill"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input :type="flag?'text':'password'" v-model="ruleForm.password">
            <i slot="prefix" class="iconfont icon-mima"></i>
            <i
              slot="suffix"
              :class="['iconfont', 'yj',flag?'icon-yanjing_huaban1':'icon-05wangluoanquan_biyanjing']"
              @click="flag=!flag"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="tijiao" @click="goLogin" @keyup.enter="keyDown"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {handler} from '../../router/index';
import {api_login} from '../../api/users';
export default {
  data() {
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: true, message: "错误提示", trigger: "blur" },
          { min: 3, max: 12, message: "请输入3-12字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "错误提示", trigger: "blur" }],
      },
      flag:false
    };
  },
  methods: {
    goLogin() {
      this.$refs.loginForm.validate(async (b) => {
        if(b){
          let rst= await api_login(this.ruleForm);
          let{code,msg,token,role}=rst;
          if(code==0){
            this.$session.set("sell_role",role);
            handler();
              this.$session.set("sell_token",token);
               this.$router.replace("/home")
          }else{
              this.$message.error(msg);
          }
          console.log(rst);
         
        }
      });
    },
    keyDown(e){
      if(e.keyCode==13){
        this.goLogin();
      }
    }
  },
  mounted () {
        //绑定事件
        window.addEventListener('keydown',this.keyDown);
      },
      //销毁事件
      destroyed(){
        window.removeEventListener('keydown',this.keyDown,false);
      }
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background-color: rgb(240, 228, 228);
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 320px;
    height: 250px;
    h2 {
      font-size: 25px;
      color: lightcoral;
      margin: 10px 0;
      text-align: center;
    }
    .tijiao {
      width: 230px;
    }
    /deep/.el-form-item__label {
      color: rgb(177, 231, 231);
      font-weight: 600;
    }
    /deep/.el-input__inner {
      background-color: rgb(240, 228, 228);
      border: 1px solid rgb(121, 208, 213);
    }
    .yj {
      font-size: 27px;
    }
  }
}
</style>
